﻿@model VasilekCerozhka.Models.ViewModels.Category.CategoryVM

@if (Model.categorys is null)
{
    <div><h1>Проверьте соединение с API</h1></div>
}
else
{
    int nImg = 0;
    int nText = 0;
    int nSlider = 0;

    <div class="slider_container">
        <div class="slider" id="slider">

            <div class="slider__content" id="slider-content">

                <div class="slider__images">

                    @for (int i = 0; i < Model.categorys.Count; i++)
                    {
                        nImg++;
                        var active = nImg == 1 ? "slider__images-item--active" : "";
                        <a asp-action="Cards" asp-route-category="@Model.categorys[i].CategoryName">
                            <div class="slider__images-item @active" data-id="@(@i+1)">
                                <img src="@Model.categorys[i].ImageUrl" />
                            </div>
                        </a>          
                    }

                </div>

                <div class="slider__text">

                    @for (int i = 0; i < Model.categorys.Count; i++)
                    {
                        nText++;
                        var active = nText == 1 ? "slider__text-item--active" : "";

                        <div class="slider__text-item @active" data-id="@(@i+1)">

                            <div class="slider__text-item-head">
                                <h3>@Model.categorys[i].CategoryName</h3>
                            </div>
                            <div class="slider__text-item-info">
                                <p>@Model.categorys[i].Description</p>
                            </div>

                        </div>
                    }

                </div>

            </div>

            <div class="slider__move-left" id="left"><i class="fa fa-angle-left fa-3x" aria-hidden="true"></i></div>
            <div class="slider__move-right" id="right"><i class="fa fa-angle-right fa-3x" aria-hidden="true"></i></div>

            <div class="slider__nav">

                <div class="slider__nav-dots" id="slider-dots">

                    @for (int i = 0; i < Model.categorys.Count; i++)
                    {
                        nSlider++;
                        var active = nSlider == 1 ? "slider__nav-dot--active" : "";
                        <div class="slider__nav-dot @active" data-id="@(@i+1)"></div>
                    }

                </div>

            </div>

        </div>
    </div>
    
}